<template>
  <div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" label-width="120px" class="search">
        <el-row class="search-input">
          <el-form-item label="订单编号">
            <el-input v-model="filters.orderNo" clearable placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="商户名称">
            <el-input v-model="filters.orderNo" clearable placeholder="商户名称"></el-input>
          </el-form-item>
          <el-form-item label="商户code">
            <el-input v-model="filters.orderNo" clearable placeholder="商户code"></el-input>
          </el-form-item>
          <el-form-item label="第三方订单编号">
            <el-input v-model="filters.orderNo" clearable placeholder="第三方订单编号"></el-input>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="filters.type" clearable placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="积分订单" value="1"></el-option>
              <el-option label="普通订单" value="2"></el-option>
              <el-option label="分期订单" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源渠道">
            <el-select v-model="filters.remarkStatus" clearable placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="APP" value="1"></el-option>
              <el-option label="商城小程序" value="2"></el-option>
              <el-option label="企业微信" value="3"></el-option>
              <el-option label="We2000公众号" value="4"></el-option>
              <el-option label="商城公众号" value="5"></el-option>
              <el-option label="其他" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动来源">
            <el-select v-model="filters.remarkStatus" clearable placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="拼团" value="1"></el-option>
              <el-option label="秒杀" value="2"></el-option>
              <el-option label="预售" value="3"></el-option>
              <el-option label="抽奖" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收货人：">
            <el-input v-model="filters.receiverName" clearable placeholder="收货人"></el-input>
          </el-form-item>
          <el-form-item label="收货人手机：">
            <el-input v-model="filters.receiverPhone" clearable placeholder="收货人手机"></el-input>
          </el-form-item>
          <el-form-item label="收货人地址：">
            <el-cascader v-model="receiverAddress" clearable style="width:160px;" :options="options"></el-cascader>
          </el-form-item>
          <el-form-item label="商品名称：">
            <el-input v-model="filters.receiverPhone" clearable placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品编码：">
            <el-input v-model="filters.receiverPhone" clearable placeholder="商品编码"></el-input>
          </el-form-item>
          <el-form-item label="会员手机号：">
            <el-input v-model="filters.receiverPhone" clearable placeholder="会员手机号"></el-input>
          </el-form-item>
          <el-form-item label="运单编号：">
            <el-input v-model="filters.receiverPhone" clearable placeholder="运单编号"></el-input>
          </el-form-item>
          <el-form-item label="发货日期：" class="commonDater" style="margin-bottom: 0 !important">
            <el-form-item prop="applyTimeStart">
              <el-date-picker type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.applyTimeStart" style="width:220px !important"></el-date-picker>
            </el-form-item>
            <el-form-item prop="applyTimeEnd">
              <el-date-picker type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.applyTimeEnd" style="width:220px !important"></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select v-model="filters.remarkStatus" clearable placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="微众分期" value="1"></el-option>
              <el-option label="We2000" value="2"></el-option>
              <el-option label="微信支付" value="3"></el-option>
              <el-option label="微众银行储蓄卡" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否需要开发票">
            <el-select v-model="filters.remarkStatus" clearable placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算状态">
            <el-select v-model="filters.remarkStatus" clearable placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="未清算" value="1"></el-option>
              <el-option label="已清算" value="2"></el-option>
              <el-option label="轧差中" value="3"></el-option>
              <el-option label="已轧差" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单标签">
            <el-select v-model="filters.remarkStatus" clearable placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="单买订单" value="1"></el-option>
              <el-option label="购物车订单" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="购买方式">
            <el-select v-model="filters.remarkStatus" clearable placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="邮寄" value="1"></el-option>
              <el-option label="线下自提" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <!-- 查询 重置部分 -->
        <el-row class="search-button">
          <el-col class="mb20">
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage()"/>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm()"/>
            <el-button type="primary" size="small" @click="addForm()">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--订单异常列表-->
    <el-table :data="pageResult"
              style="width: 100%"
              :stripe="true"
              :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
              @selection-change="handleSelectionChange"
              :size="size"
              align="align">
      <el-table-column type="selection" :selectable="selectTable" width="50"></el-table-column>
      <el-table-column prop="orderNo" label="异常订单编号" sortable width="200"></el-table-column>
      <el-table-column prop="orderNo" label="商户名称" sortable width="120"></el-table-column>
      <el-table-column prop="orderNo" label="订单编号" sortable width="200"></el-table-column>
      <el-table-column label="订单类型" sortable width="100">
        <template slot-scope="scope">普通</template>
      </el-table-column>
      <el-table-column prop="buyerUsername" label="来源渠道" sortable width="120"></el-table-column>
      <el-table-column prop="buyerUsername" label="订单来源" sortable width="120"></el-table-column>
      <el-table-column prop="buyerUsername" label="下单操作账号" sortable width="120"></el-table-column>
      <el-table-column prop="receiverName" label="收货人" sortable width="100"></el-table-column>
      <el-table-column prop="receiverPhone" label="收货人手机" sortable width="120"></el-table-column>
      <el-table-column label="收货人地址" sortable width="200">
        <template slot-scope="scope">
          <p>{{scope.row.receiverProvinceName}} {{scope.row.receiverCityName}} {{scope.row.receiverRegionName}}</p>
          <p>{{scope.row.receiverAddress}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="orderCreateTime" label="订单创建时间" sortable width="140"></el-table-column>
      <el-table-column prop="createTime" label="异常发生时间" sortable width="140"></el-table-column>
      <el-table-column prop="errorReason" label="异常原因" sortable width="100" :formatter="formatterErrotReason"></el-table-column>
      <el-table-column prop="errorRemark" label="异常备注" sortable width="100"></el-table-column>
      <el-table-column prop="errorRemark" label="异常附件" sortable width="100"></el-table-column>
      <el-table-column label="操作" fixed="right" sortable width="150">
        <template slot-scope="scope">
          <el-button>编辑</el-button>
          <el-button>删除</el-button>
          <el-button>操作日志</el-button>
          <el-button v-if="scope.row.remarkStatus == 1" size="mini" type="primary" @click="handleMarkProcessed(scope.row)">标记为已处理</el-button>
          <el-button v-if="scope.row.remarkStatus == 2" size="mini" type="primary" @click="handleMarkPending(scope.row)">标记为待处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination layout="total, prev, pager, next, jumper,sizes"
                     @current-change="refreshPageRequest"
                     @size-change="handleSizeChange"
                     :current-page="pageRequest.pageNum"
                     :page-size="pageRequest.pageSize"
                     :total="totalSize"
                     style="float:right;"
                     :page-sizes="[10, 20, 30, 40]"></el-pagination>
    </div>

    <!--标记处理弹窗-->
    <el-dialog title="标记为已处理" width="30%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="130px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
        <el-form-item label="处理备注：" prop="remark">
          <el-input style="width:100%;" v-model="dataForm.remark" auto-complete="off" type="textarea" placeholder="处理备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="handleMarkProcessedSubmit()">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
	import KtButton from '@/views/Core/KtButton'
	import citys from '../../../../static/json/Paje/citys'

	export default {
		name: 'abnormalEvent',
		components: {KtButton},
		data() {
			return {
				size: 'small',
				options: citys,
				editDialogVisible: false,
				filters: {buyerUsername: '12345'},
				receiverAddress: [],
				orderCreateTime: [],
				remarkTime: [],
				createTime: [],
				pageResult: [
          {
            orderNo:"11",
            buyerUsername:"22",
            receiverName:"张三",
            receiverPhone:"123456789",
            orderCreateTime:"2020-11-20 17:26:48",
            createTime:"2020-11-20 17:26:48",
            errorReason:"异常",
            errorRemark:"暴雨从此"
          }
        ],
				totalSize: 0,
				pageRequest: {pageNum: 1, pageSize: 10},
				dataForm: {ids: [], remark: '', remarkStatus: 0},
				dataFormRules: {remark: [{required: true, message: '请输入处理备注', trigger: 'blur'}]},
				multipleSelection: [],
				updateParams: [],
        ruleForm: {
          afterSaleNo: null,
          afterSaleType: null,
          status: null,
          sendBackStatus: null,
          sendRefundStatus: null,
          sendSourceChannel: null,
          sendActivitySources: null,
          sendPayType: null,
          sendBackType: null,
          orderNo: "123456",
          returnNumber: null,
          merchantId: null,
          storeName: null,
          applyTimeStart: null,
          applyTimeEnd: null,
          afterSalesCompletionTimeStart: null,
          afterSalesCompletionTimeEnd: null,
          limit: 10,
          start: 1
        },
			}
		},
		mounted() {
			this.findPage()
		},
		methods: {
			findPage() {
				let this_ = this
				if (this_.filters == undefined || this_.filters == null) {
					this_.filters = {}
				}
				if (this_.receiverAddress.length > 0) {
					this_.filters.receiverProvinceId = this_.receiverAddress[0]
					this_.filters.receiverCityId = this_.receiverAddress[1]
					this_.filters.receiverCountryId = this_.receiverAddress[2]
				}
				if (this_.orderCreateTime.length > 0) {
					this.filters.orderCreateTime = this_.orderCreateTime[0]
					this.filters.orderEndTime = this_.orderCreateTime[1]
				}
				if (this_.remarkTime.length > 0) {
					this.filters.remarkTime = this_.remarkTime[0]
					this.filters.remarkEndTime = this_.remarkTime[1]
				}
				if (this_.createTime.length > 0) {
					this.filters.startTime = this_.createTime[0]
					this.filters.endTime = this_.createTime[1]
				}
				this_.filters.start = this_.pageRequest.pageNum
				this_.filters.limit = this_.pageRequest.pageSize
				/*this.utils.request.orderErrorQuery(this_.filters, function(res) {
					if (res.data.rows.length == 0) {
						this_.pageResult = []
						return
					}
					this_.pageResult = res.data.rows
					this_.totalSize = Number(res.data.total)
				})*/
    },
    // 每页数据刷新
    refreshPageRequest: function(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.findPage();
    },
    // 每页条数刷新
    handleSizeChange: function(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.findPage();
    },
    // 数据转化文字
    // 异常原因分类(需要建立对应的字典暂时定义) 1.校验错误， 2.系统异常, 3.库存问题, 4.其他,
    formatterErrotType(row, column, prop) {
      if (prop == 1) {
        return "校验错误";
      } else if (prop == 2) {
        return "系统异常";
      } else if (prop == 3) {
        return "库存问题";
      } else if (prop == 4) {
        return "其他";
      }
    },
    formatterErrotObject(row, column, prop) {
      if (prop == 1) {
        return "订单";
      } else if (prop == 2) {
        return "预订单";
      }
    },
    // 异常原因(需要字典表暂时按照这个)1.仓库库存不足, 2.其他, 3.参数有误
    formatterErrotReason(row, column, prop) {
      if (prop == 1) {
        return "仓库库存不足";
      } else if (prop == 2) {
        return "其他";
      } else if (prop == 3) {
        return "参数有误";
      }
    },
    formatterRemarkStatus(row, column, prop) {
      if (prop == 1) {
        return "待处理";
      } else if (prop == 2) {
        return "已处理";
      }
    },
    // 标记为已处理
    handleMarkProcessed(obj) {
      let this_ = this;
      this_.dataForm = { remark: "" };
      if (this_.$refs["dataForm"]) {
        this_.$refs["dataForm"].clearValidate();
      }
      this_.editDialogVisible = true;
      let params = {};
      params.ids = [Number(obj.id)];
      params.remarkStatus = obj.remarkStatus;
      this_.dataForm = params;
    },
    // 批量标记为已处理
    handleBatchMarkProcessed() {
      let this_ = this;
      this_.dataForm = { remark: "" };
      if (this_.$refs["dataForm"]) {
        this_.$refs["dataForm"].clearValidate();
      }
      let params = {};
      params.ids = [];
      this_.multipleSelection.forEach((value, index) => {
        params.ids[index] = Number(value.id);
        params.remarkStatus = value.remarkStatus;
      });
      params.ids = [...new Set(params.ids)];
      this_.dataForm = params;
      this_.editDialogVisible = true;
    },
    // 标记处理提交
    handleMarkProcessedSubmit() {
      let this_ = this;
      this_.$refs.dataForm.validate(valid => {
        if (valid) {
          let params = {};
          params = this_.dataForm;
          this.utils.request.orderErrorUpdate(params, function(res) {
            if (res.code == "0000") {
              this_.$message({ message: "操作成功", type: "success" });
              this_.editDialogVisible = false;
              this_.findPage();
            } else {
              this_.$message({
                message: "操作失败, " + data.msg,
                type: "error"
              });
            }
          });
        }
      });
    },
    // 标记为待处理
    handleMarkPending(obj) {
      let this_ = this;
      let params = {};
      params.ids = [obj.id];
      params.remarkStatus = obj.remarkStatus;
      this.utils.request.orderErrorUpdate(params, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.findPage();
        } else {
          this_.$message({ message: "操作失败, " + data.msg, type: "error" });
        }
      });
    },
    // 复选框选择的值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 禁用复选框
    selectTable(row, index) {
      if (row.remarkStatus == 1) {
        return true;
      } else if (row.remarkStatus == 2) {
        return false;
      }
    },
    // 清空
    resetForm() {
      this.filters = {};
      this.receiverAddress = [];
      this.orderCreateTime = [];
      this.remarkTime = [];
      this.createTime = [];
      this.findPage();
    },
      // 新增
      addForm() {
        alert("添加！！！！");
      }
  }
};
</script>

<style scoped lang='scss'>
/* 搜索样式重置 */
.search /deep/ .el-form-item__content {
  width: 160px;
}

.search /deep/ .el-select {
  width: 160px !important;
}

.search /deep/ .el-date-editor.el-input__inner {
  width: 220px !important;
}

.search .manager /deep/ .el-form-item {
  width: 70px !important;
}

.clearfix {
  text-align: left;
}

.box-card {
  margin-bottom: 20px;
}

.jiesuan {
  margin-left: 10px;
}

.el-tabs {
  margin-bottom: 20px;
}

.orderDetail {
  margin: 20px;
  font-size: 14px;
}

.el-col {
  border-radius: 4px;
  color: #58666e !important;
}

.bg-purple {
  text-align: left;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
}

.mb20{
  margin-bottom: 20px;
}
</style>
